/**
 * 函数式封装组件
 * 1.引入.vue组件
 * 2.创建一个div容器并把这个div容器添加body中
 * 3.用createVNode创建组件
 * 4.然后用render函数将createVNode创建的组件添加到div这个容器中
 */

/**
 * 局限性
 * 1.content只能传入文本,暂时不知道slot如何编写
 * 2.修改样式的颜色很局限,只能一个一个的添加
 */

import { createVNode, render } from "vue";
import basePop from "@/components/BasePop.vue";
export const showPop = (options: any) => {
  const div = document.createElement("div");
  document.body.appendChild(div);
  /**
   * @use 隐藏弹窗
   */
  const close = () => {
    document.body.removeChild(div);
  };

  // 需要设置默认的参数
  const {
    title = "默认标题",
    content = "默认的内容",
    onCancel = close,
    onConfirm = close,
    color='pink'
  } = options;

  const pop = createVNode(basePop, {
    title,
    content,
    color,
    onCancel: () => {
      onCancel(close);
    },
    onConfirm: () => {
      onConfirm(close);
    },
  });

  render(pop, div);
};
